<template>
  <div>
    <tab :line-width=3 active-color="#108ee9" custom-bar-width="50%" v-model="type">
      <tab-item @on-item-click="tabSwitch">售卡记录</tab-item>
      <tab-item @on-item-click="tabSwitch">售卡统计</tab-item>
    </tab>
    <group v-if="type===0">
      <datetime title="开始日期" v-model="beginTime" end-date="" format="YYYY-MM-DD"></datetime>
      <datetime title="结束日期" v-model="endTime" format="YYYY-MM-DD"></datetime>
      <agent-button @btnClick="searchClick">查询</agent-button>
    </group>
    <group class="table_box"> 
      <x-table full-bordered style="background-color:#fff;font-size: .25rem;">
        <thead>
          <tr>
            <th>{{type==0?'玩家昵称':'月份'}}</th>
            <th>{{type==0?'玩家ID':'玩家ID'}}</th>
            <th>{{type==0?'房卡(张)':'玩家昵称'}}</th>
            <th>{{type==0?'订单状态':'月购卡数'}}</th>
            <th v-if="type==0">时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(list,index) in lists" :key="index">
            <td>{{type==0?list.wanjia_name:list.months}}</td>
            <td>{{type==0?list.wanjia_id:list.playerid}}</td>
            <td>{{type==0?list.cardnum:list.nickname}}</td>
            <td>{{type==0?list.shipping_status:list.sellcard}}</td>
            <td v-if="type==0">{{list.add_time}}</td>
          </tr>
        </tbody>
      </x-table>
      <div class="table_btn">
        <button @click="getUpPage()">上一页</button>
        <button @click="nextPage()">下一页</button>
      </div>
    </group>
  </div>
</template>
<script>
import { Datetime, Group, dateFormat, Tab, TabItem, XTable } from "vux";
import TableView from "../../../components/common/TableView.vue";
import AgentButton from "../../../components/common/AgentButton.vue";
export default {
  data() {
    return {
      type: 0, //tab切换的标识 0售卡记录(默认)
      lists: [],
      pagesize: 10, //每页显示条数
      page: 1, //当前页码
      maxPage: 0, //最大页数
      beginTime: dateFormat(new Date(), "YYYY-MM-DD"),
      endTime: dateFormat(new Date(), "YYYY-MM-DD")
    };
  },
  filters: {
    dateFormat
  },
  components: {
    Datetime,
    Group,
    AgentButton,
    Tab,
    TabItem,
    XTable
  },
  created() {
    //获取代理等级二级代理不能给下级代理发卡
    this.getSellcardlist(this.pagesize, this.page);
  },
  methods: {
    tabSwitch() {
      this.pagesize = 10
      this.page = 1
      if (this.type === 0) {
        this.getSellcardlist(this.pagesize, this.page);
      } else if (this.type === 1) {
        this.getSellcardmonthlist(this.pagesize, this.page);
      }
    },
    //售卡记录
    getSellcardlist(pagesize, page) {
      this.apiService.user
        .sellcardlist({
          starttime: this.beginTime,
          endtime: this.endTime,
          pagesize: pagesize,
          currentpage: page
        })
        .then(res => {
          this.maxPage = Math.ceil(res.data.total / 10);
          this.lists = res.data.sellcardlist;
          this.lists.map(item => {
            item["add_time"] = dateFormat(
              new Date(item["add_time"] * 1000),
              "YYYY-MM-DD"
            );
            if (item.shipping_status == 1) item.shipping_status = "已完成";
            else if (item.shipping_status == 2)
              item.shipping_status = "发卡失败";
            else item.shipping_status = "未完成";
          });
        });
    },
    //售卡统计
    getSellcardmonthlist(pagesize, page) {
      this.apiService.user
        .sellcardmonthlist({
          pagesize: pagesize,
          currentpage: page
        })
        .then(res => {
          this.maxPage = Math.ceil(res.data.total / 10);
          this.lists = res.data.sellcardmonthlist;
          this.lists.map(item => {
            item["months"] = dateFormat(
              new Date(item["months"] * 1000),
              "YYYY-MM-DD"
            );
            if (item.shipping_status == 1) item.shipping_status = "已完成";
            else if (item.shipping_status == 2)
              item.shipping_status = "发卡失败";
            else item.shipping_status = "未完成";
          });
        });
    },
    searchClick() {
      this.getSellcardlist(this.pagesize, this.page);
    },
    //上一页
    getUpPage() {
      if (this.page > 1) {
        this.page--;
        if(this.type===1) this.getSellcardmonthlist(this.pagesize, this.page);
        else this.getSellcardlist(this.pagesize, this.page);
      }
    },
    //下一页
    nextPage() {
      if (this.page < this.maxPage && this.maxPage != 0) {
        this.page++;
        if(this.type===1) this.getSellcardmonthlist(this.pagesize, this.page);
        else this.getSellcardlist(this.pagesize, this.page);
      }
    }
  }
};
</script>

<style scoped>
.table_btn {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0.4rem 0;
}
.table_btn button {
  color: #0085e7;
  font-size: 0.32rem;
}
.td_btn {
  line-height: 0.45rem;
  margin-bottom: 0.025rem;
}
</style>